<template>
  <div class="video-table-container">
    <!-- 操作按钮区 -->
    <div class="action-buttons">
      <button @click="handleSearch" class="icon-btn">
        <img src="../../../public/img/sousuo.png" alt="搜索图标" class="btn-icon">
        <span>搜索</span>
      </button>
      <button @click="dialogVisible = true; currentVideo = null" class="icon-btn">
        <img src="../../../public/img/jiahao.png" alt="添加图标" class="btn-icon">
        <span>添加</span>
      </button>
      <button @click="handleDelete" class="icon-btn">
        <img src="../../../public/img/chahao.png" alt="删除图标" class="btn-icon">
        <span>删除</span>
      </button>
      <button @click="handleTop" class="icon-btn">
        <img src="../../../public/img/chahao.png" alt="置顶图标" class="btn-icon">
        <span>置顶</span>
      </button>
    </div>
    <!-- 新增表格外层滚动容器 -->
    <div class="table-scroll-wrapper">
      <table class="video-table">
        <thead>
          <tr>
            <th>id</th>
            <th>标题</th>
            <th>图片</th>
            <th>视频地址</th>
            <th>添加时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in videoList" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.title }}</td>
            <td><img :src="item.img" alt=""></td>
            <td>{{ item.videoUrl }}</td>
            <td>{{ item.addTime }}</td>
            <td>
              <button class="operate-btn" @click="handleEdit(item)">修改</button>
              <button class="operate-btn">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <el-dialog
      v-model="dialogVisible"
      title="视频管理"
      width="30%"
      :before-close="handleClose"
    >
      <!-- 传递视频数据和图片地址给对话框组件 -->
      <Dialog2 :video-data="currentVideo" :image-url="currentVideo?.img" />
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessageBox } from 'element-plus'
import Dialog2 from '../Dialog2.vue';

const dialogVisible = ref(false)
const currentVideo = ref(null)  // 存储当前选中的视频数据

const videoList = ref([
  {
    id: 1,
    title: '汽修师傅',
    videoUrl: 'https://www.example1.mp4',
    addTime: '2025-10-1',
    img:'../../../public/img/1.png'
  },
  {
    id: 2,
    title: '美食制作',
    videoUrl: 'https://www.example2.mp4',
    addTime: '2025-10-2',
    img:'../../../public/img/1.png'
  },
  {
    id: 3,
    title: '户外探险',
    videoUrl: 'https://www.example3.mp4',
    addTime: '2025-10-3',
    img:'../../../public/img/1.png'
  },
  {
    id: 4,
    title: '手工艺术',
    videoUrl: 'https://www.example4.mp4',
    addTime: '2025-10-4',
    img:'../../../public/img/1.png'
  },
  {
    id: 5,
    title: '宠物日常',
    videoUrl: 'https://www.example5.mp4',
    addTime: '2025-10-5',
    img:'../../../public/img/1.png'
  },
  {
    id: 6,
    title: '健身教程',
    videoUrl: 'https://www.example6.mp4',
    addTime: '2025-10-6',
    img:'../../../public/img/1.png'
  },
  {
    id: 7,
    title: '旅行记录',
    videoUrl: 'https://www.example7.mp4',
    addTime: '2025-10-7',
    img:'../../../public/img/1.png'
  },
  {
    id: 8,
    title: '编程教学',
    videoUrl: 'https://www.example8.mp4',
    addTime: '2025-10-8',
    img:'../../../public/img/1.png'
  },
  {
    id: 9,
    title: '绘画技巧',
    videoUrl: 'https://www.example9.mp4',
    addTime: '2025-10-9',
    img:'../../../public/img/1.png'
  },
  {
    id: 10,
    title: '音乐演奏',
    videoUrl: 'https://www.example10.mp4',
    addTime: '2025-10-10',
    img:'../../../public/img/1.png'
  },
]);

// 点击修改按钮时获取当前行数据并打开对话框
const handleEdit = (item) => {
  currentVideo.value = { ...item };  // 深拷贝当前行数据
  dialogVisible.value = true;
}

const handleClose = () => {
  dialogVisible.value = false;
  currentVideo.value = null;
}

// 其他方法保持不变
const handleSearch = () => {
  console.log('搜索');
};

const handleDelete = () => {
  console.log('删除');
};

const handleTop = () => {
  console.log('置顶');
};
</script>

<style scoped>
img{
  width: 50px;
  height: 45px;
}
.action-buttons {
  margin-bottom: 16px;
  display: flex;
}

.action-buttons .icon-btn {
  margin-right: 8px;
  cursor: pointer;
  border: 0;
  background-color: red;
  color: white;
  width: 80px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5px;
}
.action-buttons .btn-icon {
  width: 10px;
  height: 10px;
  margin-right: 5px;
}
.btn{
  border: 0;
  border-color: rgb(255, 255, 255);
  width: 70px;
  height: 20px;
  color: gray;
}
.video-table-container {
  width: 100%; /* 修改为100%宽度 */
  margin: 0 auto;
}
/* 表格外层滚动容器 */
.table-scroll-wrapper {
  /* 固定容器高度，可根据实际情况调整，这里设为 calc(100vh - 150px) 减去其他元素占用高度 */
  height: calc(100vh - 150px); 
  overflow-y: auto; /* 垂直方向超出自动滚动 */
  /* 隐藏滚动条 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}
/* 隐藏Chrome等浏览器的滚动条 */
.table-scroll-wrapper::-webkit-scrollbar {
  display: none;
}
.video-table {
  width: 100%;
  border-collapse: collapse;
}
.video-table th,
.video-table td {
  /* 只保留下边框，移除其他边框 */
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}
/* 为表头添加下边框，使其与内容区分 */
.video-table th {
  border-bottom: 1px solid #ccc;
  font-weight: bold;
}
.img-placeholder {
  width: 30px;
  height: 20px;
  background-color: red;
}
.operate-btn {
  margin-right: 5px;
  color: red;
  background-color: white;
  border: 1px solid red;
  padding: 3px 6px;
  cursor: pointer;
}
</style>
